import { useEffect, useRef, useState } from 'react';
import {
  View,
  Text,
  Image,
  ScrollView
} from '@tarojs/components';
import './index.css';

const ModalMakeing = (props) => {
  let {
    myPortrayList,
    portrayId
  } = props;

  console.log('myPortrayList', myPortrayList)

  const onClose = () => {
    props.onClose && props.onClose();
  }

  const onChoosePortrayId = (id, img, name) => {
    props.onChooseItem && props.onChooseItem({id: id, img: img, name});
  }

  const doAdd = (e) => {
    props.onAdd && props.onAdd(e);
  }

  return (
    <View
      className='maskView'
      onClick={()=>{props.onClose && props.onClose()}}
    >
      <View className='modal_makeing'>
        <View className='modal_makeing_title'>
          选择我的脸部档案
          <Image
            src='https://jala-test-images.sndaurl.cn/images/closeIcon.png'
            className='modal_makeing_title_icon'
            onClick={()=>{onClose()}}
          />
        </View>
        {
          myPortrayList.length > 0 ? (
            <ScrollView
              scrollY={true}
              className='modal_makeing_list'
            >
              {
                myPortrayList.map(item=>
                  <View
                    className='modal_makeing_list_item'
                    onClick={()=>{onChoosePortrayId(item.id, item.archives_img, item.archives_name)}}
                  >
                    <View className='modal_makeing_list_item_img'>
                      <Image
                        src={item.archives_img}
                        className='modal_makeing_list_item_img_path'
                        mode='aspectFill'
                      />
                    </View>
                    <View className='modal_makeing_list_item_info'>
                      <View className='modal_makeing_list_item_info_name'>{item.archives_name}</View>
                      <View className='modal_makeing_list_item_info_time'>上传时间：{item.create_time}</View>
                    </View>
                    <Image
                      src={item.id == portrayId ? 'https://jala-test-images.sndaurl.cn/images/checkmark.png' : 'https://jala-test-images.sndaurl.cn/images/unchecked.png'}
                      className='modal_makeing_list_item_icon'
                    />
                  </View>
                )
              }
            </ScrollView>
          ) : (
            <View className='modal_makeing_empty'>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/empty.png'
                className='modal_makeing_empty_img'
              />
              <View className='modal_makeing_empty_text'>什么都没有，快去添加吧</View>
            </View>
          )
        }
        <View className='modal_makeing_action' onClick={(e)=>{doAdd(e)}}>添加脸部档案</View>
      </View>
    </View>
  )
}

export default ModalMakeing;
